<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
					margin: 0;
					padding: 0;
				}
			div{
				width: 100px;
				height: 50px;
				background-color: red;
				/* 告诉系统哪个属性需要执行过渡的效果 */
				transition-property: width;
				/* 告诉系统效果持续的时长 */
				transition-duration: 2s;
				transition-delay: 2s;
				
			 
				
			}
			/* :hover 伪类选择器除了可以用在a标签上 还可以用在其他任何标签上 */
			div:hover{
				width: 300px;
			 
			}
			
			
			
			ul{
				width: 800px;
				height: 500px;
				margin: 0 auto;
				background-color: pink;
				border: 1px solid #000;
			}
			ul li{
				list-style: none;
				width: 100px;
				height: 50px;
				margin-top: 50px;
				background-color: blue;
				transition-property: margin-left;
				transition-duration: 10s;
				
			}
			ul:hover li{
				margin-left: 700px;
			}
			
			ul li:nth-child(1){
				/* 告诉系统过渡动画运动的速度 */
				transition-timing-function:linear;
			}
			
			ul li:nth-child(2){
				transition-timing-function: ease;
			}
			ul li:nth-child(3){
				transition-timing-function: ease-in;
			}
			ul li:nth-child(4){
				transition-timing-function: ease-out;
			}
			
			ul li:nth-child(5){
				transition-timing-function:ease-in-out;
			} 
		</style>
	</head>
	<body>
		
		
		<!-- 
		 告诉系统过渡动画运动的速度
		transition-timing-function 
		linear:匀速
		ease 逐渐慢下来
		ease-in 加速
		ease-out 减速
		ease-in-out 先加速后减速
		 
		 -->
		
		<!-- <div></div> -->
		
		
		
		<ul>
			<li>linear</li>
			<li>ease</li>
			<li>ease-in</li>
			<li>ease-out</li>
			<li>ease-in-out</li>
 
		</ul>
		
	</body>
</html>